<template>
    <div>
        <cus-search>
            <cus-search-item>
                <Form :model="searchForm" :label-width="80">
                    <FormItem label="检查日期" class="mr_48 mb_20">
                        <cus-cascadeDate :startTime.sync="searchForm.startTime" :showWeekNum="false"
                            :endTime.sync="searchForm.endTime" :need-init="false" :only-month="false" type="datetime"
                            format="yyyy-MM-dd" :dateWidth="200"></cus-cascadeDate>
                    </FormItem>
                    <FormItem label="检查人员" class="mr_48 mb_20">
                        <Input v-model.trim="searchForm.checkName" placeholder="请输入检查人员" style="width: 200px;" clearable
                            maxlength="20"></Input>
                    </FormItem>
                    <FormItem label="伙食单位" class="mr_48 mb_20">
                        <Select style="width: 200px" v-model="searchForm.unitCode">
                            <Option v-for="item in unitList" :key="item.id" :value="item.unitCode">{{ item.unitName }}
                            </Option>
                        </Select>
                    </FormItem>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" @onClick="pageOption.page = 1; onInit();">查询
                    </cusButton>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onReset">重置</cusButton>
                    <!-- <cusButton size="small" class="mr_10" type="primary" ghost @onClick="onAdd">添加</cusButton> -->
                </Form>
            </cus-search-item>
        </cus-search>

        <div class="bottomPanel">
            <cus-card title="安全卫士检查列表">
                <cus-table :border="true" :loading="loading" :columns="columns" :data="data" :size="vuex_config.tableSize"
                    :bottomClass="['cus-page']">
                    <template slot-scope="{ row, index }" slot="operate">
                        <div class="flex">
                            <cus-button type="text" size="small" :style="{ color: '#1E6FFF', padding: '0 8px' }"
                                @onClick="onEdit(row)">
                                修改
                            </cus-button>
                        </div>
                    </template>
                </cus-table>
                <div style="width: 100%; display: flex; justify-content: flex-end">
                    <cus-page class="mt_20" :data="pageOption" @pageChange="onInit"></cus-page>
                </div>
            </cus-card>
            <!-- <cus-footer :showWaterMark="false">
                <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
                    <cus-page :data="pageOption" @pageChange="onInit"></cus-page>
                </div>
            </cus-footer> -->
        </div>
    </div>
</template>

<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { businessListSearch, } from '@/api/organ/business';
import { postBusinessListSearch, } from '@/libs/genericMethods.js';
export default {
    name: 'safetyHealth',
    data() {
        return {
            loading: false,
            searchForm: {
                startTime: '',
                endTime: '',
                checkName: '',
                unitCode: '',
            },
            unitList: [],
            data: [],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    // key: 'num',
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '检查人',
                    minWidth: 120,
                    key: 'checkName',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '联系电话',
                    minWidth: 120,
                    key: 'telephone',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '检查日期',
                    minWidth: 100,
                    key: 'checkDate',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '检查总结果',
                    minWidth: 100,
                    key: 'checkTotalResult',
                    align: 'center',
                    fieldLength: 64,
                },
                // {
                //     title: '操作',
                //     minWidth: 120,
                //     slot: 'operate',
                //     align: 'center'
                // },
            ],
            pageOption: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            }
        }
    },
    mounted() {
        this.getSubCanteenList();
    },
    methods: {
        onInit() {
            this.onSearch();
            // this.getErrorTempDailyListApi()
        },
        // 重置查询条件·
        onReset() {
            this.resetFilterForm();
            this.onSearch();
        },
        resetFilterForm() {
            this.searchForm.startTime = '';
            this.searchForm.endTime = '';
            this.searchForm.checkName = '';
            this.searchForm.unitCode = this.unitList[0].unitCode;
            this.pageOption.page = 1;
            console.log(this.searchForm);
        },
        getSubCanteenList() {
            console.log(111);
            getSubCanteenList().then((res) => {
                if (res.code == 1) {
                    this.unitList = res.data.list;
                    this.searchForm.unitCode = res.data.list[0].unitCode;
                    this.onInit();
                }
            });
        },
        // 查询表
        searchTableList() {
            let searchCondition = [
                {
                    fieldKey: 'checkDate',
                    fieldName: 'startTime',
                    fieldValue: 'ge',
                },
                {
                    fieldKey: 'checkDate',
                    fieldName: 'endTime',
                    fieldValue: 'le',
                },
                {
                    fieldKey: 'checkName',
                    fieldName: 'checkName',
                    fieldValue: 'like',
                },
            ];
            let params = {
                searchForm: this.searchForm,
                searchCondition,
            };
            return postBusinessListSearch(params);
        },
        // 查询安全卫生检查数据
        onSearch() {
            console.log(this.searchForm);
            this.loading = true;
            // console.log(this.searchTableList());
            let queryConditionItemList = this.searchTableList();
            businessListSearch({
                businessName: '安全卫生检查台账',
                org: this.searchForm.unitCode,
                queryConditionItemList,
                current: this.pageOption.page,
                size: this.pageOption.pageSize,
            }).then((res) => {
                if (res.retCode === 2000) {
                    console.log(res);
                    this.loading = false;
                    this.data = res.data.list;
                    this.pageOption.pageTotal = res.data.total;
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        // 添加安全卫生检查数据
        // onAdd() {
        //     this.$refs['addSafetyHealthModal'].show();
        // },
        // // 编辑安全卫生检查数据
        // onEdit(row) {
        //     this.$refs['addSafetyHealthModal'].addForm.id = row.id;
        //     this.$refs['addSafetyHealthModal'].show();
        // },
    }
}
</script>

<style scoped>
.bottomPanel {
    background-color: #fff;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    margin-top: 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
</style>
